<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/x-icon" href="../image/pic.ico">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/header.css">
    <link rel="stylesheet" href="../html/footer.html">
    <title>订单页</title>
    <style>
        iframe{width: 100%;}
        .info{position: relative;width: 1090px;margin: auto;}

        .info h3{font-size: 15px;font-weight: 600;padding: 10px 0; border-bottom:1px #e3e3e3 solid;}
        .info .add{font-size: 13px;margin-top: 10px;border: 1px solid #e3e3e3;width: 400px;}
        .info .add input{width: 308.1px;}
        .info .think{width: 400px;height: 150px;border: 2px solid #f22;}
        .info .think span{font-size: 13px;line-height: 15px;padding: 8px 10px;}

        .wuping{
            width: 1090px;
            height: 121px; 
            display: flex;
            justify-content: space-around;
            align-items: center;  
            border: 1px solid #e3e3e3; 
        }
        .thing{
            width: 1090px;
            height: 40px; 
            font-size: 13px;
            display: flex;
            justify-content: space-around;
            align-items: center;  
            border: 1px solid #e3e3e3; 
        }
        .intro{
            line-height: 22px;
            width: 140px;
            color: #333;
            font-size: 12px;
            font-weight: 500;
            margin: 30px 0 0 0;
            /* overflow: hidden; */
            white-space: wrap;
            text-overflow: ellipsis;
        }
        .photopec,.photopec img{height: 70px;width: 70px;margin-top: 15px;}
        .info ul{width: 1090px;height:300px;position: relative; background-color: rgb(248, 247, 247);margin: 0 auto;margin-bottom: 50px; overflow: hidden;}
        .info ul li{font-size: 13px;color: #999;margin: 5px 0 0 20px;}
        .info ul li:nth-child(1){color: #000;margin: 20px;}
        .order{position: absolute;right: 30px;top: 20px;font-size: 12px;}
        .order p span{display: inline-block;width: 90px;height: 50px;line-height: 60px;text-align: right;}
        .order p:nth-child(5){width: 100px;text-align: center;line-height: 40px; height: 40px;color: #fff;background-color:rgb(188, 0, 0);margin: 15px 0 0 80px;}
    </style>
</head>
<body>
    <header>
        <div class="top">
            <div class="sign">
                <ul>
                    <li>您好!</li>
                    <li>
                        <a href="#">退出</a>
                    </li>
                    <li>考拉欢迎你！</li>
                </ul>
            </div>
            <div class="nav r">
                <ul>
                    <li>每日签到</li>
                    <li>我的订单</li>
                    <li>个人中心</li>
                    <li>客户服务</li>
                    <li>充值中心</li>
                    <li>消费者权益</li>
                    <li>更多</li>
                    <li>视频内容</li>
                </ul>
            </div>
        </div>
    </header>
    <section>
        <div class="main">
            <img src="../image/logo.png" alt="" class="l">
        </div>
        <div class="info">
            <h3>选择收获地址</h3>
            <p class="think">
                <span class="name">张三 &nbsp;收</span><br>
                <span class="address">大城市铁岭莲花赤水沟子</span><br>
                <span class="tele">18654254987</span><br>
            </p>
            <p class="add"> +新增收获地址<input type="textarea"></p>
            <h3>确认商品信息</h3>
                <div class="hide">
                    <div class="thing">
                        <span style="width: 200px;">商品信息</span>
                        <span>重量(千克)</span>
                        <span>单价(元)</span>
                        <span>数量</span>
                        <span>金额(元)</span>
                    </div>
                    <div class="wuping">
                        <div class="before" style="width: 210px;height: 121px;">        
                            <div class="photopec l">1
                            </div>
                            <p class="intro l"></p>
                        </div>
                        
                        <span class="cost">0.40</span>
                        <p class="count">
                            152.00
                        </p>
                        <p class="xiaoji">1</p>
                        <span class="del">150.00</span>
                </div>
            <ul>
                <li>发票信息：订单中所有商品均不支持开具发票</li>
                <li>发票须知：</li>
                <li>1. 保税仓发货商品与海外仓发货商品属跨境海外商品，无法开具国内增值税发票</li>
                <li>2. 自2017年7月1日起，发票抬头选择公司（企业、有税号的非企业性单位和个体工商户）需提供纳税人识别号</li>
                <li>3. 自营国内仓商品支持开具电子普通发票，电子普通发票在确认收货后48小时内开具</li>
                <li>4. 杭州1号仓和杭州4号仓的商品，若下单开具纸质普通发票，发票随包裹一起寄出，补开则单独寄出</li>
                <li>5. 其他自营国内仓商品，若开具纸质普通发票，发票在确认收货后3个工作日内单独寄出</li>
                <li>6. 第三方商家若无法开具电子发票，则自动开纸质发票，商家发票以实际收到为准</li>
                <li>7. 如需增值税专用发票，请在下单时填写增值税专用发票信息，核对无误后提交，发票在确认收货后3个工作日内单独寄出</li>
                <li>8. 礼品卡支付金额不支持开发票</li>
                <div class="order">
                    <p>
                        <span>商品应付总计:</span>
                        <span>￥92.00</span>
                    </p>
                    <p>
                        <span>运费:</span>
                        <span>￥0.00</span>
                    </p>
                    <p>
                        <span>税费:</span>
                        <span>￥0.00</span>
                    </p>
                    <p>
                        <span>应付金额:</span>
                        <span>￥92.00</span>
                    </p>
                    <p class="submit">提交订单</p>
                </div>
            </ul>        
        </div>
    </section>
    <img src="../image/foot.jpg" style="width: 100%;" alt="">
    <iframe src="footer.html" scrolling="no" frameborder="0"></iframe>
    <script src="../js/jquery.min.js"></script>
    <script>

        var ad = location.href.split("=")[1];
        //详情页立即购买跳转 和绕购物车购买跳转
        $.ajax({
                url:`http://127.0.0.1:82/order?ad=${ad}`,
                success(data){
                    data = JSON.parse(data)
                    $(".intro").html(data[0].introduce)
                    $(".wuping .count").html(data[0].pirce)
                    $(".order span").eq(1).html(data[0].pirce)
                    $(".order span").eq(7).html(data[0].pirce)
                    $(".photopec").html(`<img src="../image/details${ad}.jpg">`);
                }
            })

        // 提交订单跳转
        $(".submit").click(function(){
            location.href = `http://127.0.0.1:82/html/percenter.html?ad=${ad}`
        })
    </script>
</body>
</html>